<template>
    <div>
        <el-breadcrumb separator="/" class="top-banner">
            <el-breadcrumb-item :to="{ path: '/courseSettingIndex' }" class="top-banner-color">课程设置</el-breadcrumb-item>
            <el-breadcrumb-item>新增课程</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="edu-main">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="edu-ruleForm">
                <el-form-item label="课程名称：" prop="className" required>
                    <el-input v-model.trim="ruleForm.className" placeholder="请输入课程名称" class="width414"></el-input>
                </el-form-item>
                <el-form-item label="年级：">
                    <el-select v-model="ruleForm.gradeId" placeholder="请选择">
                        <el-option v-for="(item,index) in gradeOptions" :key="index" :label="item.gradeName" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="科目：">
                    <el-select v-model="ruleForm.subjectId" placeholder="请选择">
                        <el-option v-for="(item,index) in subjectOptions" :key="index" :label="item.subjectName" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="单价：" prop="classMoney" required>
                    <el-input type="number" placeholder="请输入内容" v-model.number="ruleForm.classMoney">
                        <template slot="prepend">￥</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="每期课次：" prop="count" required>
                    <el-input v-model.number="ruleForm.count" type="number"></el-input>
                </el-form-item>
                <el-form-item label="课程类型：" prop="classType" required>
                    <el-radio-group v-model="ruleForm.classType">
                        <el-radio :label="1">集体班</el-radio>
                        <el-radio :label="0">一对一</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="计费形式：" required  prop="billingType">
                    <el-select v-model="ruleForm.billingType">
                        <el-option label="以节计费" value="0"></el-option>
                        <el-option label="以小时收费" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="上课时长：" required  prop="classTimeId">
                    <el-select v-model="ruleForm.classTimeId">
                        <el-option v-for="(item,index) in classTimeOptions" :key="index" :label="item.classTime" :value="item.id"></el-option>
                    </el-select>
                    <label for="" class="tip-txt">当以小时为计费时请选择60的倍数</label>
                </el-form-item>
                <el-form-item label="课程介绍：" prop="classIntroduce">
                    <el-input  type="textarea" placeholder="请输入2000字以内的内容" :maxlength='2000' :autosize='{ minRows: 2, maxRows: 12 }' :rows="4" v-model="ruleForm.classIntroduce" class="width414"></el-input>
                </el-form-item>
                <el-form-item label="课程封面：" required  prop="classImage">
                    <gt-material :img="ruleForm.classImage" :width="160+'px'" :height="100 + 'px'" :left="175+'px'" :tipTxtShow='tipTxtShow'
                    :materialUrl="newMaterialUrl" @change="classimageChange" @deleteImg="deleteclassimage"></gt-material>
                    <el-input v-model="ruleForm.classImage" style="display:none"></el-input>
                </el-form-item>
                <el-form-item label="详情图片：" >
                    <label for="" class="tip-txt " id="edu-tips">可批量上传，图片宽度建议使用750px以上的尺寸 </label>
                    <gt-material @change="classImageListChange" :imgLists="classImageList" :selecType="true" :path='newPath' 
                    :materialUrl="newMaterialUrl" @deleteImgList="deleteClassImageList"></gt-material>
                    <div class="p_re error-tip">{{classImageListError}}</div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">保 存</el-button>
                    <el-button @click="goBack">返 回</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
import gtMaterial from '@/components/material.vue'
import common from "@/assets/js/common.js"
export default {
  data(){
      return{
          listLeft:90,
          ruleForm:{
            className:'',
            classMoney:'',
            gradeId:'',
            subjectId:'',
            count:'',
            classType: 1,
            classImage:'',
            billingType:'0',
            classIntroduce:''
          },
          rules:{
              className:[
                { required: true, message: '请输入课程名称' }
              ],
              classMoney:[
                { required: true, message: '请输入正确金额'},
                { min: 0, type:'number',  message: '请输入正确金额'}
              ],
              count:[
                { required: true, message: '请输入0以上的正确数值'},
                { min: 1, type:'number',  message: '请输入0以上的正确数值'}
              ],
              classImage:[
                   { required: true, message: '请选择图片'},
              ],
              classImageList:[
                  { required: true, message: '请选择图片'},
              ]
          },
          tipTxtShow: true,
          tipsTxt:'封面图可以批量上传，尺寸建议为 640 * 400 px',
          gradeOptions:[],
          subjectOptions:[],
          classTimeOptions:[],
          classImageList:[],
          classImageListError:'',
          newPath:'',
          newMaterialUrl:'',
          router:''
      }
  },
    components:{
        gtMaterial,
    },
    methods:{
        aa(val){
            console.log(val)
            console.log(this.ruleForm.classType)
        },
        //課程封面改變
        classimageChange(val){
            this.ruleForm.classImage = val
        },
        //删除图片
        deleteclassimage(val){
            this.ruleForm.classImage = val
        },
        //課程詳情圖改變
        classImageListChange(val){
            let that = this
            let arr = []
            that.classImageListError = ''
            for(let i = 0; i < val.length; i++){
                arr.push(val[i].imageUrl)
            }
            that.ruleForm.classImageList = arr.join("|")
            that.classImageList = val
            console.log(val,'===',arr.join("|"))
        },
        //課程詳情圖删除
        deleteClassImageList(val){
            let that = this
            console.log(this.ruleForm.classImageList)
            let arr = this.ruleForm.classImageList.split('|')
            arr.splice(val,1)
            that.ruleForm.classImageList = arr.join("|")
        },
        //保存按鈕
        submitForm(formName) {
            let that = this
            that.$refs[formName].validate((valid) => {
            if (valid) {
                that.ruleForm.classImage = that.ruleForm.classImage.split("/upload")[1]
                console.log('submit!',that.ruleForm);
                // return
                common.ajax({
                    'url': eduAPI.activeAPI.saveClass,
                    'type': "POST", 
                    'data':that.ruleForm,
                    'success': function(data) {
                        console.log('保存课程',data.data)
                        that.$message({
                            showClose: true,
                            type: 'success',
                            message: '保存成功!'
                        });
                        that.$router.push({
                            name: "courseSettingIndex"
                        });
                    }
                });
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        },
        //返回按钮
        goBack(){
            this.$router.push({path:'/courseSettingIndex'})
        }
    },
    mounted(){
        let that =this
        let router = this.$route.params
        //查询详情
        common.ajax({
            'url':eduAPI.activeAPI.findClass,
            'type': "GET",
            'data':{classId:router.id},
            'success': function(data) {
                console.log(data.data)
                if (data.data) {
                    let middleList = []
                    that.ruleForm = data.data
                    that.ruleForm.classImage = that.newPath + that.ruleForm.classImage 
                    if(data.data.classImageList){
                        middleList = data.data.classImageList.split("|")
                        for(let i = 0 ; i < middleList.length; i++){
                            that.classImageList[i]==undefined?that.classImageList[i]={}:''
                            that.classImageList[i].path = that.newPath
                            that.classImageList[i].imageUrl= middleList[i]
                            
                        }
                    }
                    that.classImageList.splice(1,0);
                    console.log(that.classImageList)
                }
            }
        });
         //素材库和域名调用接口
        common.ajax({
            'url': eduAPI.activeAPI.getMaterialUrl,
            'type': "GET",
            'success': function(data) {
                console.log(data,'素材库和域名调用接口')
                if(data.data){
                    that.newMaterialUrl = data.data.materialImageHome
                    that.newPath = data.data.materialImageUrl
                }
            }
        })
         //所有年级
        common.ajax({
            'url':eduAPI.activeAPI.findAllGradeList,
            'type': "GET",
            'success': function(data) {
                if (data.data) {
                    that.gradeOptions = data.data
                    that.gradeOptions.unshift({id:'',gradeName:'请选择'})
                }
            }
        });
        //所有科目
        common.ajax({
            'url': eduAPI.activeAPI.findAllSubjectList,
            'type': "GET",
            'success': function(data) {
                console.log('所有科目',data.data)
                if (data.data) {
                    that.subjectOptions = data.data
                    that.subjectOptions.unshift({id:'',subjectName:'请选择'})
                }
            }
        });
        //上课时长
        common.ajax({
            'url': eduAPI.activeAPI.findAllClassTimeList,
            'type': "GET",
            'success': function(data) {
                console.log('上课时长',data.data)
                if (data.data) {
                    that.classTimeOptions = data.data
                    if(!router.id){
                        that.ruleForm.classTimeId = data.data[0].id
                    }
                }
            }
        });
    }
}
</script>
